	!(function () {
	    function writeCode(code) {
	        let codeContainer = document.querySelector('#code')
	        let drawContainer = document.querySelector('#style-draw')
	        let n = 0
	        let id = setInterval(() => {
	            n += 1
	            codeContainer.innerHTML = code.substring(0, n)
	            drawContainer.innerHTML = code.substring(0, n)
	            // codeContainer.scrollTop = codeContainer.scrollHeight
	            if (n >= code.length) {
	                clearInterval(id)
	            }
	        }, 10)
	    }
		
	 let code = ` 
	/* 开始画大白*/
   
   
   #head{
   	height: 64px;
   	width: 100px;
   	border-radius: 50%;
   	background-color: #fff;
   	margin: 0 auto;
   	margin-bottom: -20px;
   	
   	
   	/* 做出阴影，有立体效果 */
   	border-bottom: 5px solid #e0e0e0;
   	
   	z-index: 100;
   	
   	position: relative;	
   }
   
   #eye,
   #eye2{
   	width: 11px;
   	height: 13px;
   	background: #282828;
   	border-radius: 50%;
   	position: relative;
   	top: 30px;
   	left: 27px;
   	transform: rotate(8deg);
   	animation: blink 1s ease-in-out infinite alternate;
   }
   
   #eye2{
   	transform: rotate(-8deg);
   	left: 69px;
   	top: 17px;
   }
   
   #mouth{
   	width: 38px;
   	height: 1.5px;
   	background: #282828;
   	position: relative;
   	left: 34px;
   	top: 10px;
   }
   
   #torso,
   #belly{
   	margin: 0 auto;
   	height: 200px;
   	width: 180px;
   	background: #fff;
   	border-radius: 47%;
   	
   	border: 5px solid #e0e0e0;
   	border-top: none;
   	z-index: 1;
   }
   
   #belly{
   	height: 300px;
   	width: 245px;
   	margin-top: -140px;
   	z-index: 5;
   }
   
   #cover{ /* */
   	width: 180px;
   	background: #fff;
   	height: 150px;
   	margin: 0 auto;
   	position: relative;
   	top: -20px;
   	border-radius: 50%;
   }
   
   
   #heart{
   	width: 25px;
   	height: 25px;
   	
   	
   	border-radius: 50%;
   	position: relative;
   	
   	/* inset 表示阴影由内部发出 默认不写为外部发出 */
   	box-shadow: 2px 5px 2px #ccc inset;
   	
   	right: -115px;
   	/* left: 115px; */
   	top: 40px;
   	z-index: 111;
   }
   
   #left-arm,
   #right-arm{
   	height: 270px;
   	width: 120px;
   	border-radius: 50%;
   	background: #fff;
   	margin: 0 auto;
   	position: relative;
   	top: -350px;
   	left: -100px;
   	transform: rotate(20deg);
   	z-index: -1;
   }
   
   #right-arm{
   	transform: rotate(-20deg);
   	left:100px;
   	top:-620px;
   }
   
   
   #l-bigfinger,
   #r-bigfinger{
   	height: 50px;
   	width: 20px;
   	border-radius: 50%;
   	background: #fff;
   	position: relative;
   	top: 250px;
   	left: 50px;
   	transform: rotate(-50deg);
   }
   
   #r-bigfinger{
   	left: 50px;
   	
   	/* 注意css样式后面写的是直接覆盖掉前面的，而不是在前面的基础上再次旋转  */
   	transform: rotate(50deg);
   }
   
   #l-smallfinger,
   #r-smallfinger{
   	height: 35px;
   	width: 15px;
   	border-radius: 50%;
   	background: #fff;
   	position: relative;
   	top: 195px;
   	left: 66px;
   	transform: rotate(-40deg);
   }
   
   #r-smallfinger{
   	left: 37px;
   	/* 注意css样式后面写的是直接覆盖掉前面的，而不是在前面的基础上再次旋转  */
   	transform: rotate(40deg);
   }
   
   
   #left-leg,
   #right-leg{
   	height: 170px;
   	width: 90px;
   	border-radius: 40% 30% 10px 45%;
   	background: #fff;
   	position: relative;
   	top: -640px;
   	left: -45px;
   	transform: rotate(-1deg);
   	z-index: -2;
   	margin: 0 auto;
   }
   
   #right-leg{
   	border-radius: 30% 40% 45% 10px;
   	left: 50px;
   	top: -810px;
   	transform: rotate(1deg);
   }
   
   
   @keyframes blink{
   	40%{
   		transform: rotate(80deg);
   	}
   }
   /*大白完毕*/
   `

	console.log(code);
	    writeCode(code)
	})()